<template>
  <div class="hv-exception">
    <div class="hv-img-block">
      <div class="hv-img-ele" :class="config[type].class"></div>
    </div>
    <div class="hv-content">
      <h2>{{ config[type].title }}</h2>
      <div class="hv-desc">{{ config[type].desc }}</div>
      <a-button type="primary" @click="handleToHome">
        <hv-dynamic-icon iconName="DoubleLeftOutlined" /> 返回首页
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { useRouter } from 'vue-router';
  import { defineComponent } from 'vue';
import Environments from '@/visual/commons/utils/env-util';

  const exceptionConfig = {
    404: {
      class: 'hv-img-ele-not-found',
      title: '404',
      desc: '抱歉，你访问的页面不存在...',
    },
  };

  export default defineComponent({
    name: 'Exception',
    props: {
      type: {
        type: String,
        default: '404',
      },
    },
    setup() {
      const router = useRouter();
      const config = exceptionConfig;

      const handleToHome = () => {
        router.push(Environments.getEvnProp('VITE_HOME_ROUTER'));
      };

      return {
        config,
        handleToHome,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './Exception.less';
</style>
